<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <!--导入框架样式文件-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery1.12.4.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>

</head>

<body>
<div class="container">

    <div class="panel panel-default">
        <div class="panel-heading clearfix">

            <a href="${pageContext.request.contextPath}/addUI"  class="btn btn-primary pull-right" >添加用户</a>
        </div>
<%--        <form id="f1" class="form‐inline pull‐left" method="post" action="${pageContext.request.contextPath}/list">--%>
<%--            <div class="form‐group"> <label for="realname">真实姓名</label>--%>
<%--                <input type="text" name="realname" class="form‐control" id="realname" placeholder="真实姓名">--%>
<%--            </div>--%>
<%--            <div class="form‐group">--%>
<%--                <label for="email">Email</label>--%>
<%--                <input type="email" name="email" class="form‐control" id="email" placeholder="Email">--%>
<%--            </div>--%>
<%--            <div class="form‐group">--%>
<%--                <label for="telephone">电话</label>--%>
<%--                <input type="text" name="telephone" class="form‐control" id="telephone" placeholder="电话">--%>
<%--            </div>--%>
<%--            <button type="submit" class="btn btn‐default">查询</button>--%>
<%--        </form>--%>
        <table class="table table-bordered table-hover ">
            <tr class="success">
                <th>编号</th>
                <th>用户名</th>
                <th>密码</th>
                <th>真实姓名</th>
                <th>邮箱</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${users}" var="u">
                <tr>
                    <td>${u.uid}</td>
                    <td>${u.username}</td>
                    <td>${u.password}</td>
                    <td>${u.realname}</td>
                    <td>${u.email}</td>
                    <td>${u.telephone}</td>
                    <td>
                        <a class="btn btn-success btn-sm" href="${pageContext.request.contextPath}/updateUI?uid=${u.uid}">修改</a>&nbsp;
                        <a class="btn btn-danger btn-sm" href="${pageContext.request.contextPath}/delete?uid=${u.uid}" onclick="return confirm('确定删除吗?')">删除</a>
                    </td>
                </tr>
            </c:forEach>

        </table>
    </div>
</div>
</body>
<script>
    $(function () {
        $("#f1").submit(function () {
            var $realname = $("#realname");
            var $email = $("#email");
            var $telephone = $("#telephone");
            $realname.val($.trim($realname.val()));
            $email.val($.trim($email.val()));
            $telephone.val($.trim($telephone.val()));
        })

        //实现复选框全选 全不选
        $("input[name='choose']").click(function () {
            $(":checkbox[name='ids']").prop("checked",this.checked);
        })
        $("#deleteBatch").click(function () {
            获取选中的复选框的个数
            var length =$(":checkbox[name='ids']:checked").length;
            //console.log()
            if(length<=0){
                alert("请选中后再删除!!!")
                return;
            }
            $("#deleteBatchFrom").submit();
        })
    })
</script>
</html>
